<template>
	<el-main style="padding: 0 20px" v-loading="loading">
		<div class="topBox sa-m-b-10">
			<div class="topBox-title">
				请先完成批量铺货设置确认
			</div>
			<div class="topBox-content">
				首次铺货需要先确认铺货设置，发货时效，售后服务和运费模板都可在铺货设置中调整或者编辑，官方货源铺货后，以上三个信息与货源保持一致。
			</div>
		</div>
		<el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="120px">
			<el-form-item label="鲸囍价" prop="price_rate">
				<div class="price sa-flex">
					<div>采购价 × （ 1 + &nbsp;&nbsp;</div>
					<el-input v-model="ruleForm.price_rate" type="number" @input="onInput" :min="0" style="width: 150px;" placeholder="加价">
						<template #append>%</template>
					</el-input>
					<div>&nbsp;&nbsp;）+&nbsp;&nbsp;</div>
					<el-input v-model="ruleForm.money" type="number"  @input="onInput2" :min="0" style="width: 150px;" placeholder="加价">
						<template #append>元</template>
					</el-input>
				</div>
			</el-form-item>
			<el-form-item label="抹零方式" prop="round_down">
				<el-radio-group v-model="ruleForm.round_down">
					<el-radio value="keep_origin">保留分角</el-radio>
					<el-radio value="keep_up">向上取整元</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="发货时效" prop="delivery_time_type">
				<el-select v-model="ruleForm.delivery_time_type" placeholder="选择发货时效" style="width: 240px">
					<el-option label="当日发货" value="today" />
					<el-option label="24小时发货" value="hour24" />
					<el-option label="48小时发货" value="hour48" />
					<el-option label="三天内发货" value="day3" />
					<el-option label="五天内发货" value="day5" />
				</el-select>
			</el-form-item>
			<el-form-item label="售后服务" prop="aftersale">
				<el-select v-model="ruleForm.aftersale" placeholder="选择售后服务" style="width: 240px">
					<el-option label="7天无理由退货" value="day7" />
					<el-option label="15天无理由退货" value="day15" />
					<el-option label="30天无理由退货" value="day30" />
				</el-select>
			</el-form-item>
			<el-form-item label="运费模板" prop="dispatch_id">
				<el-select v-model="ruleForm.dispatch_id" placeholder="选择运费模板" style="width: 240px" @change="changeDispatch">
					<el-option :label="item.name" :value="item.id"  v-for="item in state.dispatchList" :key="item.id"/>
				</el-select>
			</el-form-item>
			<el-form-item label="铺货状态" prop="distribution">
				<el-radio-group v-model="ruleForm.distribution">
					<el-radio value="up">铺货成功直接上架</el-radio>
					<el-radio value="wait_up">铺货成功后到待售</el-radio>
				</el-radio-group>
			</el-form-item>
			<!-- <el-form-item label="限购地区" prop="quota">
				<el-select v-model="ruleForm.quota" placeholder="选择限购地区" style="width: 240px">
					<el-option label="信息不同步 （部分货源可能有地区限购）" :value="1" />
				</el-select>
			</el-form-item>
			<el-form-item label="库存信息" prop="stock">
				<el-select v-model="ruleForm.stock" placeholder="选择库存信息" style="width: 240px">
					<el-option label="不能单独维护库存，自动同步货源库存" :value="1" />
				</el-select>
			</el-form-item> -->
		</el-form>
	</el-main>
	<el-footer class="goods-index-footer">
		<sa-view-bar>
			<template #right>
				<div class="sa-flex">
					<el-button type="primary" @click="submitForm()">保存设置</el-button>
				</div>
			</template>
		</sa-view-bar>
	</el-footer>
</template>
<script setup>
import { reactive, ref ,onMounted} from 'vue'
import { api } from '../recommend.service';
import {  cloneDeep } from 'lodash';
import { ElMessageBox, ElMessage } from 'element-plus';
const loading = ref(true)
const ruleFormRef = ref(null)
const ruleForm = reactive({
	price_rate: 0,
	money: 0,
	round_down: '',
	delivery_time_type:'',
	aftersale:'',
	dispatch_id:'',
	express_temp:'',
	distribution:''
	// stock:'',
	// quota:'',
	// distribution:'',
})
const state = reactive({
	mode: 'add', // add or edit
	dispatchList: [],
})

const rules = reactive({
	price_rate: [
		{ required: true, message: '请填写加价百分比', trigger: 'blur' },
	],
	round_down: [
		{ required: true, message: '请选择抹零方式', trigger: 'change' },
	],
	delivery_time_type: [
		{ required: true, message: '请选择发货时效', trigger: 'change' },
	],
	aftersale: [
		{ required: true, message: '请选择售后服务', trigger: 'change' },
	],
	dispatch_id: [
		{ required: true, message: '请选择运费模板', trigger: 'change' },
	],
	stock: [
		{ required: true, message: '请选择库存信息', trigger: 'change' },
	],
	quota: [
		{ required: true, message: '请选择限购地区', trigger: 'change' },
	],
	distribution: [
		{ required: true, message: '请选择默认铺货状态', trigger: 'change' },
	]
})
onMounted(()=>{
	getDispatchList()
	getDetail()
})
function  onInput(val){
 // 只允许非负数，保留两位小数
 let formatted = val.toString()
    .replace(/[^\d.]/g, '')         // 过滤非法字符
    .replace(/^0+(\d)/, '$1')       // 去除多余前导0
    .replace(/^\./, '0.')           // 首位不能是 .
    .replace(/(\.\d{2})\d+/, '$1'); // 限制两位小数

  // 限制最大值为 1,000,000
  let num = parseFloat(formatted);
  if (!isNaN(num) && num > 1000000) {
    formatted = '1000000.00';
  }

  ruleForm.price_rate = formatted;
  }
  function  onInput2(val){
 // 只允许非负数，保留两位小数
 let formatted = val.toString()
    .replace(/[^\d.]/g, '')         // 过滤非法字符
    .replace(/^0+(\d)/, '$1')       // 去除多余前导0
    .replace(/^\./, '0.')           // 首位不能是 .
    .replace(/(\.\d{2})\d+/, '$1'); // 限制两位小数

  // 限制最大值为 1,000,000
  let num = parseFloat(formatted);
  if (!isNaN(num) && num > 1000000) {
    formatted = '1000000.00';
  }

  ruleForm.money = formatted;
  }
const submitForm = () => {
	if (!ruleFormRef.value) return
	 ruleFormRef.value.validate(async (valid, fields) => {
		if (valid) {
			let  {msg , error } = await api.setting[state.mode == 'add' ? 'add' : 'edit'](cloneDeep(ruleForm))
			ElMessage({
				type: error == 0 ? 'success' :'error',
				message: msg,
			});
			getDetail()
		} else {
		}
	})
}
function changeDispatch(e) {
	ruleForm.express_temp = state.dispatchList.find(item => item.id == e)?.name || ''
}
async function getDispatchList(){
	let {data,error} = await api.setting.dispatchList()
	if(error == 0){
		state.dispatchList = data
	}
}
async function getDetail(){
	loading.value = true
	let {data,error} = await api.setting.detail()
	if(error == 0){
		loading.value = false
		state.mode =  data?.id ? 'edit' : 'add'
		ruleForm.price_rate = data?.price_rate
		ruleForm.money = data?.money
		ruleForm.round_down = data?.round_down
		ruleForm.delivery_time_type = data?.delivery_time_type
		ruleForm.aftersale = data?.aftersale
		ruleForm.distribution = data?.distribution
		ruleForm.dispatch_id = data?.dispatch_id
		ruleForm.express_temp = data?.express_temp
	}
}

</script>
<style lang="scss" scoped>
.topBox {
	background: #F3F6FF;
	padding: 16px;

	.topBox-title {
		font-family: Source Han Sans;
		font-size: 22px;
		font-weight: 500;
		line-height: normal;
		letter-spacing: normal;
		color: #141414;
		padding-bottom: 4px;
	}

	.topBox-content {
		font-family: Source Han Sans;
		font-size: 18px;
		font-weight: 350;
		line-height: normal;
		letter-spacing: normal;
		color: #AFAFAF;
	}
}
</style>